import React, { Component, PropTypes } from 'react';
import { createContainer } from 'meteor/react-meteor-data';
import { Transactions } from '../api/transaction/transactions.js';
import { Users } from '../api/users/users.js';
import { Session } from 'meteor/session'
import Snackbar from 'material-ui/Snackbar';

import {List, ListItem} from 'material-ui/List';
import InfiniteScroll from 'react-infinite-scroller';

import Divider from 'material-ui/Divider';
import Subheader from 'material-ui/Subheader';
import Avatar from 'material-ui/Avatar';
import {grey400, darkBlack, lightBlack} from 'material-ui/styles/colors';
import IconButton from 'material-ui/IconButton';
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem'; 
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import NavigationLeft from 'material-ui/svg-icons/hardware/keyboard-arrow-left';
import AppBar from 'material-ui/AppBar';

import TextField from 'material-ui/TextField';
import SelectField from 'material-ui/SelectField';

let faker = require('faker/locale/zh_CN');

const styles = {
  toolbar:{
    position: 'fixed',
    top: 0,
    width: '100%',
  },
  dlg:{
    width: '100%',
    maxWidth: 'none',    
  }
}



var myallprojects = [];
var trademenus = [];

export class Tab3List extends Component {
  constructor(props) {
    super(props);
    this.state = {
        page:0,
        picPos:0,
        hasMore:true,
        items:[],
        pinfo:null,
        ch:0,
        dlg_open_view:false,
        snack_open:false,
        snack_msg:'',
    };
}
componentDidMount(x,y,z){
  this.setState({cw:window.innerWidth,ch:window.innerHeight});
}  
renderAppBar(){
  if(this.props.handleClose){
    return (
      <AppBar title="项目历史交易" 
        style={styles.toolbar}
       
        iconElementLeft={
            <IconButton 
            onTouchTap={this.props.handleClose}
            iconStyle={{width:48,height:48}}
            style={{padding: 0,}}
            ><NavigationLeft /></IconButton>
          }         
      />      
    );
  }else return '';
}


render() {
    let items = this.props.items||[];
   
    let result = []; 
    //items.reverse();
    items.map((item) => {
     
      let favatar = item.avatarFrom;
      let tavatar = item.avatarTo;
      let title = item.tags;
      let confirmid = item.confirmAt;
      let tid = item.transactionId;
      let desc = item.desc+'----'+item.title;
      
        result.push(
          <ListItem
            key = {item.transactionId}
            style={{textAlign:'left'}}
            onTouchTap={e => this.setState({dlg_open_view:true,view_item:item})}
             leftAvatar={<Avatar src={favatar} />}
            primaryText={item.titleFrom}
            
            secondaryText={
              <p>
                <span style={{color: darkBlack}}>{title}&nbsp;&nbsp;</span> <br/>
                {desc}
              </p>
            }
            secondaryTextLines={2}
          />        
        );
      if(confirmid){
          result.push(
          <ListItem
            key = {item.transactionId+'_a1'}
            style={{textAlign:'right'}}
            onTouchTap={e => this.setState({dlg_open_view:true,view_item:item})}
            rightAvatar={<Avatar src={tavatar} />}
          
            primaryText={item.titleTo}
            secondaryText={
                <p>
                <span style={{color: darkBlack}}>【审批】{title}</span> <br/>
                {desc}
              </p>
            }
            secondaryTextLines={2}
          />        
        );   
      } 
    });

    //判断是否显示‘确认交易’按钮
    let  btns_view = [];
    let vitem = this.state.view_item;  

    if(!vitem){
      //默认空数据,避免界面出错
      vitem={};
    }

    btns_view.push(
      <FlatButton
        label="取消"
        primary={true}
        onTouchTap={e => this.setState({dlg_open_view:false})}
      />
      );
    

    return (
       <div>    
      {this.renderAppBar()}    
      <div style={{height:this.state.ch,overflowY:'auto'}}>
       <List style={{marginTop:'4em',marginBottom:'4em'}}>
         {result}
       </List>
       </div>
       <Dialog
          contentStyle={styles.dlg}
          actions={btns_view}
          title="查看交易"
          modal={false}
          open={this.state.dlg_open_view}
          openSecondary={true}
          autoScrollBodyContent={true}
          onRequestClose={e => this.setState({dlg_open_view:false})}
        >
      <TextField
        floatingLabelText='交易号'
        floatingLabelFixed={true}
        fullWidth={true}
        value={vitem.transactionId}
      />
      <TextField
        floatingLabelText='交易名'
        floatingLabelFixed={true}
        fullWidth={true}
        value={vitem.title}
      />
      <TextField
        floatingLabelText='发起时间'
        floatingLabelFixed={true}
        fullWidth={true}
        value={vitem.createdAt?vitem.createdAt.toLocaleString():''}
      />
      <TextField
        floatingLabelText='确认时间'
        floatingLabelFixed={true}
        fullWidth={true}
        value={vitem.confirmAt?vitem.confirmAt.toLocaleString():''}
      />
      <TextField
        floatingLabelText='交易说明'
        floatingLabelFixed={true}
        fullWidth={true}
        multiLine={true}
        value={vitem.desc}
      />
      <TextField
        floatingLabelText='交易数据'
        floatingLabelFixed={true}
        fullWidth={true}
        multiLine={true}
        value={JSON.stringify(vitem.data)}
      />
    </Dialog>

        <Snackbar
          open={this.state.snack_open}
          message={this.state.snack_msg}
          autoHideDuration={4000}
        />
       </div>
    );
  }
}

Tab3List.propTypes = {
  items: PropTypes.array.isRequired,
};

export default createContainer(props => {
  //初始加载,无需数据
  if(!props.utitle)
    return{
      items:[]
    };

  

  Meteor.subscribe('project_history',{pname:props.utitle});
  
  return {
    items: Transactions.find({"data.projectname":props.utitle}, 
    {sort: { createdAt: 1 }}).fetch(),
  };


}, Tab3List);